<template>
  <div>
    <div v-if="fang != 1" class="padding_10">
      <div>
        <el-button
          v-permissions="{ permission: ['add:GoodsList'] }"
          :disabled="addBool"
          type="primary"
          @click="fang = 1"
        >
          新增{{ $router.app._route.meta.title }}
        </el-button>
        <el-button type="primary" @click="dialog = true">类别管理</el-button>
      </div>
      <div style="margin-top: 10px">
        <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
          <el-table-column label="商品名称" show-overflow-tooltip>
            <template slot-scope="scope">
              <div>{{ scope.row.goods_name }}</div>
              <el-tag size="mini">{{ scope.row.goods_type_name }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="商品分组" prop="goods_method_name" />
          <el-table-column label="商品价格" prop="goods_price" />
          <el-table-column label="商品编码" prop="goods_sn" />
          <el-table-column label="发货方式" prop="delivery_method_name" />
          <el-table-column label="创建时间" prop="created_at" />
          <el-table-column label="商品状态" prop="goods_status_name" />
          <el-table-column label="操作" width="160">
            <template slot-scope="scope">
              <el-button
                v-permissions="{ permission: ['edit:GoodsList'] }"
                type="primary"
                @click="editGoods(scope.row.id)"
              >
                编辑
              </el-button>
              <el-button
                v-permissions="{ permission: ['offline:GoodsList'] }"
                @click="downGoods(scope.row)"
              >
                下架
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <div class="flex_between">
        <div></div>
        <el-pagination
          :current-page.sync="page"
          layout="prev, pager, next, jumper"
          :total="total"
          @current-change="getGoods"
        />
      </div>
    </div>
    <div>
      <Add-goods
        v-if="fang == 1"
        :goods-id="goodsId"
        :goods-type="goodsType"
        :o-type-code="goodsCode"
        @send="showMain"
      />
    </div>

    <el-dialog title="类别" :visible.sync="dialog">
      <Category v-if="dialog" />
      <div slot="footer">
        <el-button type="danger" @click="dialog = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getGoodsList, setUpDownStatus } from '@/api/commodity'

  export default {
    components: {
      AddGoods: () => import('../conponents/addgoods.vue'),
      Category: () => import('./components/category.vue'),
    },
    data() {
      return {
        addBool: true, // 控制新增按钮是否禁用
        emptyText: ' ',
        page: 1,
        total: 10,
        tableData: [],
        goodsType: '',
        fang: 0,
        goodsId: 0,
        goodsCode: window.location.pathname.substring(1),

        dialog: false,
      }
    },
    mounted() {
      this.getGoods()
    },
    methods: {
      getGoods() {
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        const data = {
          goods_code: this.goodsCode,
          page: this.page,
          pagesize: 10,
        }
        getGoodsList(data).then((res) => {
          this.tableData = res.data.list.data
          this.goodsType = res.data.goods_type
          this.total = res.data.list.last_page * 10
          this.addBool = false
          loading.close()
          if (res.data.list.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      showMain() {
        this.fang = 0
        this.goodsId = 0
        this.$nextTick(() => {
          this.getGoods()
        })
      },
      // 编辑商品
      editGoods(id) {
        this.goodsId = id
        this.fang = 1
      },
      // 下架商品
      downGoods(row) {
        this.$confirm('确定要' + row.goods_name + '下架吗', '下架', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          const params = {
            id: row.id,
            goods_status: 'off',
          }
          // 调用修改上下架状态接口函数
          setUpDownStatus(params).then(() => {
            this.$message.success('所选商品下架成功')
            // 调用该函数，重新获取商品列表信息进行渲染
            this.getGoods()
          })
        })
      },
    },
  }
</script>

<style scoped>
  .flex_between {
    display: flex;
    justify-content: space-between;
  }
</style>
